<template>
  <div class="aic">
    <el-icon
      v-if="tagScroll"
      @click="handleLeft"
      style="color: var(--navColorFont)"
      class="llt-icon-size"
      ><arrow-left
    /></el-icon>
    <el-scrollbar
      class="w100"
      :ref="Scrolltag"
      @scroll="handleScroll"
      wrap-class="scrollertag"
    >
      <div class="llt-tag aic" id="tagBox">
        <!-- 选中的 -->
        <div
          class="llt-tag-item cP"
          @mouseenter="mouseenterTagTool(tagToolIndex)"
          v-for="(item, tagToolIndex) in tagsData"
          :class="isActive(item) ? ' llt-tag-active' : ''"
          :key="tagToolIndex"
        >
          <el-dropdown
            trigger="contextmenu"
            @visible-change="vChange"
            @command="handleTagPageTool"
          >
            <span
              class="tag-font"
              :style="{ paddingRight: tagToolIndex == 0 ? '8px' : '4px' }"
              @click.stop="handleOpen(tagToolIndex, item)"
            >
              {{ item.meta.title }}
              <el-icon
                class="llt-tag-icon-close"
                @click.stop="handleClose(tagToolIndex)"
                v-show="tagToolIndex != 0"
                ><close
              /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  v-for="(item, index) in state.tagPageToolData"
                  :key="index"
                  :disabled="item.disabled"
                  :command="index"
                  >{{ item.name }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <!-- 未选中 -->
      </div>
    </el-scrollbar>

    <el-icon
      v-if="tagScroll"
      @click="handleRight"
      style="color: var(--navColorFont)"
      class="llt-icon-size"
      ><arrow-right
    /></el-icon>
  </div>
</template>

<script setup lang="ts">
import { store } from "/@ts/store";
import { ref, reactive, getCurrentInstance, onUpdated, watch } from "vue";
import type { AppRouteModule } from "/@ts/router/types";
import { useRoute } from "vue-router";
import router from "/@ts/router";
const internalInstance = getCurrentInstance(); //获取当前实例
const route = useRoute();

const emit = defineEmits(["handleOpen", "handleClose"]);
const props: any = defineProps({
  currentTag: {
    type: Number,
    default: 0,
  },
  tagsData: {
    type: Array,
    default: [],
  },
});
interface TagPageTool {
  disabled: boolean;
  name: string;
}
interface State {
  tagPageToolData: Array<TagPageTool>;
  currentTagIndex: number;
}
const state: State = reactive({
  tagPageToolData: [
    {
      name: "关闭当前页面",
      disabled: false,
    },
    {
      name: "关闭左边页面",
      disabled: false,
    },
    {
      name: "关闭右边边页面",
      disabled: false,
    },
    {
      name: "关闭其他页面",
      disabled: false,
    },
  ],
  currentTagIndex: 0, //当前菜单是否展开
});
// 滚动条模块 start
const isActive = (data: any) => {
  return data.path === route.path;
};
let ScrolltagRef: any = "";
const Scrolltag = (el: any) => (ScrolltagRef = el);
let tagScroll = ref(false); //滚动条出现
let valueScrollMax = ref(0); //隐藏部分滚动条最大偏移长度
let valueScroll = ref(0); //隐藏部分滚动条当前偏移长度
let StepScroll = ref(0); //步长
window.addEventListener("resize", function () {
  // 变化后需要做的事
  Listening();
});
onUpdated(() => {
  Listening();
});
/**
 * 滚动条触发
 */
const handleScroll = (e: any) => {
  valueScroll.value = e.scrollLeft;
};
const handleLeft = () => {
  let old = JSON.parse(JSON.stringify(valueScroll.value));
  let current =
    valueScroll.value - StepScroll.value <= 0
      ? 0
      : valueScroll.value - StepScroll.value;
  let currentIndex = -1;
  for (let index = old; index >= current; index--) {
    valueScroll.value = index;
    currentIndex++;
    time(currentIndex, index);
  }
};
const time = (stepIndex: any, item: any) => {
  stepIndex--;
  setTimeout(() => {
    ScrolltagRef.setScrollLeft(item);
  }, stepIndex * 1);
};
const handleRight = () => {
  let old = JSON.parse(JSON.stringify(valueScroll.value));
  valueScroll.value =
    valueScroll.value + StepScroll.value >= valueScrollMax.value
      ? valueScrollMax.value
      : valueScroll.value + StepScroll.value;
  let currentIndex = -1;
  for (let index = old; index <= valueScroll.value; index++) {
    //  valueScroll.value = index
    currentIndex++;
    time(currentIndex, index);
  }
};
const Listening = () => {
  let tagBox: any = document.querySelector("#tagBox");
  let boxWidth = tagBox.offsetWidth;
  let sonS = tagBox.children;
  // map((e:any)=>e.offsetWidth).reduce((e,z)=>e+z)
  let allWidth = 0;
  for (let index = 0; index < sonS.length; index++) {
    const element = sonS[index];
    allWidth += element.offsetWidth;
  }
  valueScrollMax.value = allWidth - boxWidth;
  StepScroll.value = valueScrollMax.value / 2;
  console.log("allWidth > boxWidth :>> ", allWidth > boxWidth);
  if (allWidth > boxWidth) {
    tagScroll.value = true;
  } else {
    tagScroll.value = false;
  }
};
// 滚动条模块 end
const handleOpen = (index: number, routerItem: AppRouteModule) => {
  // 删除数组指定索引后返回数据
  // console.log('routerItem :>> ', routerItem);
  console.log("routerItem :>> ", routerItem);
  router.push(routerItem);
};
//tagpagetool 工具函数
const handleClose = (index: Number) => {
  // 删除数组指定索引后返回数据
  emit("handleClose", index);
};
/**
 * 关闭左边
 */
const closeLeft = (index: number) => {};
/**
 * 关闭右边
 */
const closeRight = (index: number) => {};
const vChange = (bool: boolean) => {
  //每次切换初始化数据在处理是否禁用
  state.tagPageToolData = [
    {
      name: "关闭当前页面",
      disabled: false,
    },
    {
      name: "关闭左边页面",
      disabled: false,
    },
    {
      name: "关闭右边边页面",
      disabled: false,
    },
    {
      name: "关闭其他页面",
      disabled: false,
    },
  ];
  //等于1 说明只有一个标签页 即默认首页
  if (props.tagsData.length == 1) {
    state.tagPageToolData = state.tagPageToolData.map((res) => {
      res.disabled = true;
      return res;
    });
  } else if (props.tagsData.length > 1) {
    //说明在最后一个
    if (state.currentTagIndex == props.tagsData.length - 1) {
      if (props.tagsData.length != 2) {
        state.tagPageToolData[2].disabled = true;
      } else {
        state.tagPageToolData[1].disabled = true;
        state.tagPageToolData[2].disabled = true;
        state.tagPageToolData[3].disabled = true;
      }
    } else if (state.currentTagIndex == 0) {
      //  说明只有俩且在第一个
      state.tagPageToolData[0].disabled = true;
      state.tagPageToolData[1].disabled = true;
    } else if (state.currentTagIndex == 1) {
      //  说明只有俩且在第一个
      state.tagPageToolData[1].disabled = true;
    }
  }
};
//鼠标悬浮tag标签
const mouseenterTagTool = (e: number) => {
  state.currentTagIndex = e;
};
const handleTagPageTool = (index: number) => {
  let data = JSON.parse(JSON.stringify(props.tagsData));
  switch (index) {
    case 0: //关闭当前页面
      data.splice(state.currentTagIndex, 1);
      break;
    case 1: //关闭左边页面
      data.splice(1, state.currentTagIndex - 1);
      break;
    case 2: //关闭右边边页面
      data.splice(state.currentTagIndex + 1);
      break;
    case 3: //关闭其他页面
      if (state.currentTagIndex == 0) {
        data.splice(1);
      } else {
        data = [];
        props.tagsData.forEach((res, index) => {
          if (index == 0 || index == state.currentTagIndex) {
            data.push(res);
          }
        });
      }
      break;
  }
  store.commit("MoreCloseTagPages", data);
};
</script>

<style scoped lang="scss">
.llt-tag {
  margin: 0 30px;
}
.llt-tag-item {
  flex-shrink: 0;
}
.llt-tag-item .tag-font {
  display: inline-block;

  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: 0 8px;
  padding-right: 4px;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
  margin-right: 5px;
}
.llt-tag-icon-close {
  font-size: 12px;
  margin-left: 5px;
}
.llt-tag-icon-close:hover {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 100%;
}

.llt-tag-item:hover {
  color: rgb(9, 96, 189);
}

.llt-tag-active:hover .tag-font {
  color: white !important ;
}
</style>
